<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>选择出行城市</title>
    <link rel="stylesheet" href="../../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/iconfont/iconfont.css">
    <link rel="stylesheet" href="../../../css/index/hotel/sort.css" />
    <link rel="stylesheet" href="../../../css/index/hotel/addr.css">
    <link rel="stylesheet" href="../../../css/my/frequenter/index.css" />
</head>
<body style="cursor: pointer">
    <div class="aui-content content-padded" style="position:fixed;top:0.1rem;width:100%;background:#f7f7f7;z-index:999;">
        <div class="search">
            <i class="aui-iconfont aui-icon-search" style="line-height:2.2rem;"></i>
            <input class="search_city" onchange="change(this)"   type="text" placeholder="搜索城市" style="height: 1.6rem;" value="">
        </div>
    </div>
    <div class="hotCity" style="margin-top:2.5rem;">
        <div class="cityTitle"><span>热门城市</span></div>
        <ul>
            <li onclick="hotCityClick(this)">北京</li>
            <li onclick="hotCityClick(this)">上海</li>
            <li onclick="hotCityClick(this)">深圳</li>
            <li onclick="hotCityClick(this)">广州</li>
            <li onclick="hotCityClick(this)">成都</li>
            <li onclick="hotCityClick(this)">重庆</li>
            <li onclick="hotCityClick(this)">杭州</li>
            <li onclick="hotCityClick(this)">西安</li>
            <li onclick="hotCityClick(this)">武汉</li>
            <li onclick="hotCityClick(this)">青岛</li>
            <li onclick="hotCityClick(this)">郑州</li>
            <li onclick="hotCityClick(this)">天津</li>
            <li onclick="hotCityClick(this)">济南</li>
            <li onclick="hotCityClick(this)">南京</li>
            <li onclick="hotCityClick(this)">厦门</li>
            <li onclick="hotCityClick(this)">长沙</li>
            <li onclick="hotCityClick(this)">太原</li>
        </ul>
    </div>
    <ul id="tab-target" style="margin-top: 0rem;">
        <li class="sort_box" id="train_lists">
            <!--<div id="letter" ></div>-->
            <!--<div class="initials">-->
                <!--<ul>-->
                    <!--&lt;!&ndash;<li><img src="img/068.png"></li>&ndash;&gt;-->
                <!--</ul>-->
            <!--</div>-->
        </li>
        <li></li>
    </ul>

</body>
<script type="text/javascript" src="../../../script/extend/jquery-3.3.1.min.js"></script>
<script src="../../../script/aui/api.js"></script>
<script  src="../../../script/aui/aui-tab.js"></script>
<script type="text/javascript" src="../../../script/extend/jquery.charfirst.pinyin.js"></script>
<script type="text/javascript" src="../../../script/extend/sort.js"></script>
<script type="text/javascript" src="../../../script/extend/doT.min.js"></script>
<script type="text/javascript" src="../../../script/config.js"></script>
<script type="text/javascript" src="../../../script/common.js"></script>
<script id="train_addr_list" type="text/x-dot-template">
    <div id="letter" ></div>
    {{ for(var i=0;i < it.length;i++) {}}
        <li class="sort_list" onclick="hasselected(this)">
            <div class="num_name">{{=it[i].name}}</div>
            <i class="aui-iconfont aui-icon-correct hidden"></i>
        </li>
    {{ } }}
    <div class="initials" style="margin-top:-1rem;">
        <ul>
            <!--<li><img src="img/068.png"></li>-->
        </ul>
    </div>
</script>
<script>
apiready = function() {
  api.parseTapmode();
  //飞机票城市
  city_on = api.pageParam.city_on;//获取城市标识
  city_list = '';
 //获取城市列表
  $.getJSON('./planeCityList.json',function(ret){
    if (ret.code == 1) {
        var dataInter = ret.data;
        city_list = dataInter;
        var interText = doT.template($("#train_addr_list").text());
        $("#train_lists").append(interText(dataInter));
        sort();
    } else {
        alert(data.msg);
    }
  });

}

    //选择热门城市
    function hotCityClick(obj){
        var  city_name = $(obj).text();
        $('.search_city').val(' ');
        $('.search_city').val(city_name);
        if (city_on == 0) {
          $api.setStorage('aircraf_start_site', city_name);
        } else {
          $api.setStorage('aircraf_end_site', city_name);
        }
    }

    function change(obj){
        get_travelers_list(obj.value);
    }
    //城市列表筛选
    function get_travelers_list(search){
        $('#train_lists').empty();
        var new_list = [];
        city_list.forEach(function(value , index){
            if (value.name.indexOf(search) != -1) {
                new_list.push(value);
            }
        })
        if (city_on == 0) {
          $api.setStorage('aircraf_start_site', search);
        } else {
          $api.setStorage('aircraf_end_site', search);
        }
        var interText = doT.template($("#train_addr_list").text());
        $("#train_lists").append(interText(new_list));
        sort();
    }

    //选择城市
    function hasselected(obj){
        $('.search_city').val(' ');
        var cityName = $(obj).find('div').text();
        $('.search_city').val(cityName);
        if (city_on == 0) {
          $api.setStorage('aircraf_start_site', cityName);
        } else {
          $api.setStorage('aircraf_end_site', cityName);
        }
        // $(obj).siblings().children(".aui-icon-correct").addClass("hidden").removeClass("selected");
        // $(obj).find(".aui-icon-correct").removeClass("hidden").addClass("selected");
    }


</script>
</html>
